<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style type="text/css">
	    body{
	    	margin: 0;
	    	padding: 100px;
	    }
		#div1{
			width:100px;
			height:100px;
			background-color: red;
			filter: alpha(opacity:30);
			opacity: 0.3;
		}

		#div2{
			width: 1px;
			height: 100px;
			background-color: #000;
			position: absolute;
			left: 1000px;
			top: 0;
		}
    </style>
    <script type="text/javascript" src="move2.js"></script>
	<script type="text/javascript">
	window.onload=function(){
		var oDiv1=document.getElementById('div1');
		var oDiv2=document.getElementById('div2');
		oDiv1.onmouseover=function(){
			//startMove(oDiv1,'width',1000,startMove(oDiv2,'left',100))
			startMove(oDiv1,'width',1000,function(){
				startMove(oDiv1,'height',300,function(){
					startMove(oDiv1,'border-radius',15,function(){
						startMove(oDiv1,'opacity',100)
					});
				});
			});
		};

        oDiv1.onmouseout=function(){
             startMove(oDiv1,'opacity',30,function(){
             	startMove(oDiv1,'border-radius',0,function(){
             		startMove(oDiv1,'height',100,function(){
             			startMove(oDiv1,'width',100);
             		})
             	})
             });
        }

	};
	</script>
</head>
<body>
	<div id="div1"></div>
	<div id="div2"></div>

</body>
</html>